<template>
	<view class="miou-mine-box"  v-show="indexPage=='mine'">
		<view class="miou-head-box">
			<!--标题栏-->
			<bar-title :isBack='false' bgColor='bg-white'>
				<block slot="content">我的</block>
			</bar-title>
			
			<!--用户信息-->
			<view class="miou-user-info-box bg-white">
				
				<!--已登陆-->			
				<view class="cu-list menu-avatar" v-if="hasLogin">
					<view class="cu-item">
						<view class="cu-avatar">
							<image class="avatar" :src="userInfo.headurl" 
							mode="aspectFill"></image>
						</view>
						
						<view class="content" @click="$jumpPages('info')">
							<view class="text-black ">
								<text class="nickname">{{userInfo.nickname}}</text>
								<view class="lv">
									<image class="icon" src="/static/img/ic_mine_charm.png" mode="widthFix"></image>
									<text class="charm">{{user.charm}}</text>
								</view>
							</view>
							<view class="text-sm margin-top">
								ID:<text>{{userInfo.username}}</text>
							</view>
						</view>
						<view class="">
							<view class="cuIcon-right"></view>
						</view>
					</view>
				</view>
				
				<!--未登陆-->
				<view class="cu-list menu-avatar" v-else >
					<view class="cu-item">
						<view class="cu-avatar">
							<image class="avatar" src="/static/img/logo.png" mode="aspectFill"></image>
						</view>
						<view class="content" @click="$jumpPages('login')">
							<view class="text-black text-bold">登录</view>
							<view class="sm margin-top-xs sm">立即登录，解锁更多功能</view>
						</view>
						<view class="">
							<view class="cuIcon-right"></view>
						</view>
					</view>
				</view>
				
				<!-- 数据 3宫格 -->
				<view class="user-data-list">
					<view class="grid col-3 padding-bottom">
						<view class="user-data-item" 
							v-for="(item,index) of user.userDataList" :key="index"
						>
							<view class="padding-top-sm text-center"
								@tap="jumpPageTap(item.path)"
							>
								<view class="num">{{user[item.key]}}</view>
								<view class="margin-top-xs">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			
		</view>

		
		
		<view class="margin-top">
			
			<!--推荐工具-->
			<view class="cu-list menu" >
				<view class="cu-item arrow"  
					v-for="(item, index) in toolsList" :key="index"
					@tap="jumpPageTap(item.path)"
					:class="{'margin-top': item.marginTop}"
				>
					<view class="content">
						<image class="icon" :src="'/static/img/' + item.icon" />
						<text class="text-black">{{ item.name }}</text>
					</view>
				</view>
			</view>
			
		</view>
	
		<view class="margin-top bg-white " v-if="hasLogin">
			<button class="cu-btn flex bg-white lg" @tap="regist()">退出登录</button>
		</view>
	
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
/**
 * toolsList: [
			{
				id: 1,
				icon: 'ic_mine_circle.png',
				name: '动态',
				path: 'order'
			},{
				id: 2,
				icon: 'icon_hdong.png',
				name: '我的活动',
				path: 'myactivity'
			},{
				id: 3,
				icon: 'ic_mine_account.png',
				marginTop: true,
				name: '我的账户',
				path: 'collection'
			},{
				id: 4,
				icon: 'ic_mine_gift.png',
				name: '我的礼物',
				path: 'coupon'
			},{
				id: 5,
				icon: 'ic_mine_prop.png',
				name: '我的道具',
				path: 'coupon'
			},{
				id: 6,
				icon: 'ic_mine_integral.png',
				name: '积分商城',
				path: 'coupon'
			},{
				id: 7,
				icon: 'ic_mine_collection.png',
				name: '我的收藏',
				path: 'collection'
			},
		],
	
 */
import { mapState, mapActions } from 'vuex';
import  appMixin from './appMixin';
import { User } from '@/models/user.js';
let user = new User()
export default {
	name: 'ViewMine',
	mixins: [appMixin],
	computed: {
		...mapState({
			"hasLogin": state => !!state.token.username,
			"userInfo": state => state.userInfo,
		}),
	},
	data() {
		return {
			user: user,
			toolsList: [
				{
					id: 1,
					icon: 'icon_hdong.png',
					name: '我的活动',
					path: 'myactivity'
				}, 
				{
					id: 2,
					icon: 'ic_mine_secondhand.png',
					name: '我的闲本',
					path: 'myidle'
				}, {
					id: 3,
					icon: 'ic_mine_account.png',
					marginTop: true,
					name: '我的账户',
					path: 'myAccount'
				},
			],
		}
	},
	watch: {
		hasLogin(val) {
			if(val) {
				// console.log('hasLogin');
				// this.setOnShow();
			}
		}
	},
	methods: {
		...mapActions(['appGetUser', 'appLogout']),
		jumpPageTap(path) {
			if(!path) return
			this.$jumpPages(path)
		},
		setOnShow() {
			if(!this.hasLogin) return
			this.appGetUser()
			user.getUserAccount()
		},
		regist() {
			this.appLogout()
			uni.clearStorage()
			user.clearUserInfo()
			this.$jumpPages('login')
		}
	}
}
</script>


<style lang="scss" scoped>
	.miou-mine-box {
		width: 100%;
		.miou-head-box {
			padding-top: 0;
			.miou-user-info-box {
				.cu-list.menu-avatar>.cu-item {
					background-color: inherit;
					height: 200rpx;
					padding-right: 24rpx;
					.cu-avatar{
						width: 146rpx;
						height: 146rpx;
						border-radius: 50%;
						overflow: hidden;
						.avatar{
							width: 146rpx;
							height: 146rpx;
							border-radius: 50%;
						}
					}
					.content {
						
						left: 200rpx;
						.nickname{
							color: #000;
							font-size: 34rpx;
							margin-right: 20rpx;
						}
						.lv{
							display: flex;
							align-items: center;
						}
						.icon{
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}
						.charm{
							color: #B44F73;
							font-size: 20rpx;
						}
					}
					&:after {
						width: 0;
						height: 0;
						border-bottom: 0;
					}
				}
				
				.user-data-item{
					font-weight: 400;
					color: #000000;
					position: relative;
					&:not(:first-child):after {
					    content: " ";
					    position: absolute;
					    top: 0;
					    left: 0;
					    box-sizing: border-box;
					    width: 200%;
					    height: 200%;
					    border-left: 1px solid #ddd;
					    border-radius: inherit;
					    -webkit-transform: scale(.5);
					    transform: scale(.5);
					    -webkit-transform-origin: 0 0;
					    transform-origin: 0 0;
					    pointer-events: none;
					}
				}
			}
	
		}
		.cu-list.menu{
			.content{
				display: flex;
				align-items: center;
			}
			.icon{
				width: 36rpx;
				height: 36rpx;
				margin-right: 24rpx;
			}
		}
	}
</style>